<template>
  <div>
    <v-dialog v-model="dialog.visible" fullscreen hide-overlay transition="dialog-bottom-transition">
      <v-card>
        <v-toolbar dark color="primary">
          <v-btn icon dark @click="dialog.visible=false">
            <v-icon>close</v-icon>
          </v-btn>
          <v-toolbar-title>{{dialog.title}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-toolbar-items v-if="dialog.data.id!==''">
            <v-btn dark flat @click="updatePrescription">保存</v-btn>
          </v-toolbar-items>
        </v-toolbar>
        <v-card-text>
          <v-container class="pb-0" grid-list-md>
            <v-form ref="form" v-model="valid" lazy-validation>
              <v-layout wrap align-center>
                <v-flex class="mr-4" xs12 sm6 md3 lg2>
                  <v-text-field :rules="rule.name" label="运动处方名称" v-model="dialog.data.name" required></v-text-field>
                </v-flex>
                <v-flex class="mr-4" d-flex xs12 sm6 md3 lg2>
                  <v-select :rules="rule.label" :items="courseType" item-text="name" item-value="id" label="课程类型" v-model="dialog.data.labelId" search-input></v-select>
                </v-flex>
                <v-flex xs12>
                  <v-text-field label="行动" :rules="rule.actions" v-model="dialog.data.actions" required></v-text-field>
                </v-flex>
                <div style="flex-wrap: wrap" class="d-flex align-center ml-1">
                  <span class="subheading mr-2">分数等级</span>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level0" label="缺测"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level1" label="55分以下[0,55)"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level2" label="55-65分[55,65)"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level3" label="65-80分[65,80)"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level4" label="80-85分[80,85)"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level5" label="85-95分[85,95)"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.level6" label="95分以上[95)"></v-checkbox>
                </div>
                <v-flex xs12 class="pb-0 pl-0 pr-0 pt-0"></v-flex>
                <div style="flex-wrap: wrap" class="d-flex align-center ml-1">
                  <span class="subheading mr-2">性别</span>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.male" label="男"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.female" label="女"></v-checkbox>
                </div>
                <v-flex xs12 class="pb-0 pl-0 pr-0 pt-0"></v-flex>
                <div style="flex-wrap: wrap" class="d-flex align-center ml-1">
                  <span class="subheading mr-2">年级</span>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade11" label="一年级"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade12" label="二年级"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade13" label="三年级"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade14" label="四年级"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade15" label="五年级"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade16" label="六年级"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade21" label="初一"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade22" label="初二"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade23" label="初三"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade31" label="高一"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade32" label="高二"></v-checkbox>
                  <v-checkbox class="d-inline-block mr-2" v-model="dialog.data.grade33" label="高三"></v-checkbox>
                </div>
                <v-flex xs12 class="pb-0 pl-0 pr-0 pt-0"></v-flex>
                <uploader class="ml-1" base="prescription/" ref="picUploader" refs="picUploader" title="图片上传" :max="1" :pic="true">
                  <template slot-scope="props">
                    <div class="upload-list">
                      <v-img :src="props.url" aspect-ratio="1" class="grey lighten-2" contain/>
                      <div style="flex-direction: column;" class="upload-list-hover d-flex" v-if="props.tool">
                        <div class="d-flex justify-space-between mt-3">
                          <v-icon class="font-white" @click="$refs[props.refs].left(props.index)">arrow_left</v-icon>
                          <v-icon class="font-white" @click="$refs[props.refs].right(props.index)">arrow_right</v-icon>
                        </div>
                        <div class="d-flex justify-space-between">
                          <v-icon class="font-white" @click="$refs[props.refs].upload(props.index)">refresh</v-icon>
                          <v-icon class="font-white" @click="$refs[props.refs].delete(props.index)">delete</v-icon>
                        </div>
                      </div>
                      <div style="flex-direction: column;" class="upload-list-hover align-center d-flex" v-if="props.progressVisible">
                        <v-progress-circular :rotate="-90" :size="100" :width="15" :value="props.progress" color="primary">{{ props.progress }}</v-progress-circular>
                      </div>
                    </div>
                  </template>
                  <div class="upload-list d-flex align-center" slot="add" slot-scope="props">
                    <v-icon style="font-size: 80px" @click="$refs[props.refs].upload(props.length)">add</v-icon>
                  </div>
                </uploader>
                <v-flex xs12 v-if="dialog.data.id===''" style="margin-left: -4px">
                  <v-btn color="info" @click="createPrescription">新增运动处方</v-btn>
                </v-flex>
                <v-flex xs12 v-else>
                  <sub-table ref="subTable" :prescriptionId="dialog.data.id"/>
                </v-flex>
              </v-layout>
            </v-form>
          </v-container>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import uploader from '../../components/Uploader'
import subTable from './SubTable'
import { Error } from '../../utils/error'
import { putPrescription, postPrescription } from '../../api/prescription'
export default {
  name: 'Dialog',
  components: {
    subTable,
    uploader
  },
  props: {
    courseType: {}
  },
  data: () => ({
    dialog: {
      visible: false,
      title: '',
      data: {
        id: '',
        name: '',
        labelId: 0,
        actions: '',
        level0: false,
        level1: false,
        level2: false,
        level3: false,
        level4: false,
        level5: false,
        level6: false,
        male: false,
        female: false,
        grade11: false,
        grade12: false,
        grade13: false,
        grade14: false,
        grade15: false,
        grade16: false,
        grade21: false,
        grade22: false,
        grade23: false,
        grade31: false,
        grade32: false,
        grade33: false
      }
    },
    rule: {
      name: [v => !!v || '运动处方名称必须填写', v => (v && v.length <= 255) || '运动处方名称必须小于255个字符'],
      label: [v => typeof v === 'number' || '请选择课程类型'],
      actions: [v => !!v || '行动必须填写', v => (v && v.length <= 255) || '行动必须小于255个字符']
    },
    valid: true
  }),
  methods: {
    clear () {
      this.dialog.data = {
        id: '',
        name: '',
        labelId: 0,
        actions: '',
        level0: false,
        level1: false,
        level2: false,
        level3: false,
        level4: false,
        level5: false,
        level6: false,
        male: false,
        female: false,
        grade11: false,
        grade12: false,
        grade13: false,
        grade14: false,
        grade15: false,
        grade16: false,
        grade21: false,
        grade22: false,
        grade23: false,
        grade31: false,
        grade32: false,
        grade33: false
      }
      this.$refs.picUploader.fileList = []
    },
    show (title) {
      this.dialog.title = title
      this.dialog.visible = true
    },
    get (data) {
      this.dialog.data = data
      this.$refs.picUploader.fileList = []
      this.$refs.picUploader.fileList.push({
        src: data.picUrl,
        toolVisible: false,
        progressVisible: false,
        progress: 0
      })
      this.$nextTick(function () { this.$refs.subTable.update() })
    },
    createPrescription () {
      if (this.$refs.form.validate()) {
        if (this.$refs.picUploader.fileList.length === 0 || this.$refs.picUploader.fileList[0].src.length === 0) {
          Error(5000, '未上传图片')
        } else {
          let data = {
            name: this.dialog.data.name,
            labelId: this.dialog.data.labelId,
            actions: this.dialog.data.actions,
            picUrl: this.$refs.picUploader.fileList[0].src,
            level0: this.dialog.data.level0,
            level1: this.dialog.data.level1,
            level2: this.dialog.data.level2,
            level3: this.dialog.data.level3,
            level4: this.dialog.data.level4,
            level5: this.dialog.data.level5,
            level6: this.dialog.data.level6,
            male: this.dialog.data.male,
            female: this.dialog.data.female,
            grade11: this.dialog.data.grade11,
            grade12: this.dialog.data.grade12,
            grade13: this.dialog.data.grade13,
            grade14: this.dialog.data.grade14,
            grade15: this.dialog.data.grade15,
            grade16: this.dialog.data.grade16,
            grade21: this.dialog.data.grade21,
            grade22: this.dialog.data.grade22,
            grade23: this.dialog.data.grade23,
            grade31: this.dialog.data.grade31,
            grade32: this.dialog.data.grade32,
            grade33: this.dialog.data.grade33
          }
          putPrescription(data).then((res) => {
            this.dialog.data.id = res.data.id
            this.$emit('update')
          })
        }
      }
    },
    updatePrescription () {
      if (this.$refs.form.validate()) {
        if (this.$refs.picUploader.fileList.length === 0 || this.$refs.picUploader.fileList[0].src.length === 0) {
          Error(5000, '未上传图片')
        } else {
          let item = []
          for (let i = 0; i < this.$refs.subTable.table.item.length; i++) {
            item.push(this.$refs.subTable.table.item[i].id)
          }
          let data = {
            id: this.dialog.data.id,
            name: this.dialog.data.name,
            labelId: this.dialog.data.labelId,
            actions: this.dialog.data.actions,
            picUrl: this.$refs.picUploader.fileList[0].src,
            level0: this.dialog.data.level0,
            level1: this.dialog.data.level1,
            level2: this.dialog.data.level2,
            level3: this.dialog.data.level3,
            level4: this.dialog.data.level4,
            level5: this.dialog.data.level5,
            level6: this.dialog.data.level6,
            male: this.dialog.data.male,
            female: this.dialog.data.female,
            grade11: this.dialog.data.grade11,
            grade12: this.dialog.data.grade12,
            grade13: this.dialog.data.grade13,
            grade14: this.dialog.data.grade14,
            grade15: this.dialog.data.grade15,
            grade16: this.dialog.data.grade16,
            grade21: this.dialog.data.grade21,
            grade22: this.dialog.data.grade22,
            grade23: this.dialog.data.grade23,
            grade31: this.dialog.data.grade31,
            grade32: this.dialog.data.grade32,
            grade33: this.dialog.data.grade33,
            item: item
          }
          postPrescription(data).then((res) => {
            this.$emit('update')
            this.dialog.visible = false
          })
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
